<template>
   <view class="uv-page">
      <uv-cell
         :titleStyle="{ fontWeight: 500 }"
         @click="openMask(index)"
         :title="item.title"
         v-for="(item, index) in list"
         :key="index"
         :is-link="true"
      >
         <template v-slot:icon>
            <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
         </template>
      </uv-cell>

      <uv-overlay :show="show" @click="show = !show"></uv-overlay>

      <uv-overlay :show="showSlot" @click="showSlot = !showSlot">
         <view class="overlay-wrap">
            <view class="overlay-wrap__box"></view>
         </view>
      </uv-overlay>

      <uv-overlay
         :opacity="0.85"
         :show="showOpcatiy"
         @click="showOpcatiy = !showOpcatiy"
      ></uv-overlay>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const show = ref(false);
const showSlot = ref(false);
const showOpcatiy = ref(false);

const list = [
   {
      title: '基本案列',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/overlay/baseCases.png',
   },
   {
      title: '嵌入内容',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/overlay/embeddedContent.png',
   },
   {
      title: '设置透明度',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/overlay/setTransparency.png',
   },
];

const openMask = (index: number) => {
   if (index === 0) {
      show.value = !show.value;
   } else if (index === 1) {
      showSlot.value = !showSlot.value;
   } else {
      showOpcatiy.value = !showOpcatiy.value;
   }
};
</script>

<style lang="scss" scoped>
.uv-page {
   padding: 0;
}

.overlay-wrap {
   @include flex;
   justify-content: center;
   align-items: center;
   flex: 1;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

   &__box {
      width: 200rpx;
      height: 200rpx;
      background-color: #70e1f5;
   }
}
</style>
